<template>
  <!-- eslint-disable -->
  <eve-container padding="20px">
    <!-- 弹窗展示表单页，不需要使用eve-container组件包裹 -->
    <div class="eve-common-form-container">
      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <div class="eve-common-form-title">
              两列表单标题-label设置为200px
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item>
              <span slot="label">
                带图标说明
                <i class="
                    eve-common-icon eve-iconfont eve-icon-question-circle-o
                  " @click="info"></i>
              </span>
              <el-input class="eve-common-input" :size="$size" clearable v-model="form.text" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="必填校验" prop="requestText">
              <el-input class="eve-common-input" :disabled="disabled" :size="$size" v-model="form.requestText" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <el-form-item>
              <span slot="label">
                带输入建议
                <i class="
                    eve-common-icon eve-iconfont eve-icon-question-circle-o
                  " @click="info"></i>
              </span>
              <el-autocomplete :disabled="disabled" class="eve-common-autocomplete" :size="$size" style="width: 100%"
                v-model="form.autocomplete" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <el-form-item label="长文本长文本长文本（长文本长文本长）">
              <el-input class="eve-common-input" :disabled="disabled" :size="$size" v-model="form.longText"
                placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <el-form-item label="证件有效期" prop="dateRangScope">
              <el-date-picker class="eve-common-date-picker" v-model="form.dateRangScope" type="daterange"
                :disabled="disabled" :size="$size" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期"></el-date-picker>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <el-form-item label="带详情字段" prop="detailField">
              <span class="eve-common-detail-field">{{
                form.detailField
              }}</span>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="带详情字段" prop="detailField">
              <span class="eve-common-detail-field">{{
                form.detailField
              }}</span>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="日期范围" prop="dateRange">
              <el-date-picker :disabled="disabled" class="eve-common-date-picker" :size="$size"
                v-model="form.dateRange.dateStart" type="date" placeholder="开始日期"></el-date-picker>
              <span>&nbsp;&nbsp;~&nbsp;&nbsp;</span>
              <el-date-picker :disabled="disabled" class="eve-common-date-picker" :size="$size"
                v-model="form.dateRange.dateEnd" type="date" placeholder="结束日期"></el-date-picker>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <el-form-item label="文本域">
              <el-input class="eve-common-input" type="textarea" :disabled="disabled" maxlength="200" :size="$size"
                :rows="3" show-word-limit v-model="form.fieldText" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <el-form-item label="下拉树">
              <eve-drop-down-tree class="eve-common-drop-down-tree" :size="$size"
                :data="dropDownTree"></eve-drop-down-tree>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="密码框" prop="passwordText">
              <el-input class="eve-common-input" :size="$size" :disabled="disabled" v-model="form.passwordText"
                show-password style="width: 85%" />
              <span class="eve-common-info-tip">说明文字</span>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="带清空">
              <el-input class="eve-common-input" :disabled="disabled" :size="$size" v-model="form.clearText" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="数字加减1">
              <el-input-number :disabled="disabled" class="eve-common-input-number" v-model="form.numberText"
                :size="$size" :min="1" :max="10" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="带单位" prop="unitText">
              <el-input-number class="eve-common-input-number" :size="$size" :disabled="disabled"
                v-model="form.unitText" />
              <span class="eve-common-info-tip">万元</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="横向单选">
              <el-radio-group :size="$size" class="eve-common-radio-group eve-common-horizontal" :disabled="disabled"
                v-model="form.horizontalRadio">
                <el-radio label="1">单选按钮1</el-radio>
                <el-radio label="2">单选按钮2</el-radio>
                <el-radio label="3">单选按钮3</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="横向多选">
              <el-checkbox-group :size="$size" class="
                  eve-common-checkbox-group
                  eve-common-horizontal
                  eve-common-fixed-error
                " :disabled="disabled" v-model="form.horizontalCheckBox">
                <el-checkbox label="复选框 A"></el-checkbox>
                <el-checkbox label="复选框 B"></el-checkbox>
                <el-checkbox label="复选框 C"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="纵向单选">
              <el-radio-group :size="$size" class="eve-common-radio-group eve-common-vertical" :disabled="disabled"
                v-model="form.verticalRadio">
                <el-radio label="1">单选按钮1</el-radio>
                <el-radio label="2">单选按钮2</el-radio>
                <el-radio label="3">单选按钮3</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纵向多选" prop="verticalCheckBox">
              <el-checkbox-group :size="$size" class="eve-common-checkbox-group eve-common-vertical"
                v-model="form.verticalCheckBox" :disabled="disabled">
                <el-checkbox label="复选框 A"></el-checkbox>
                <el-checkbox label="复选框 B"></el-checkbox>
                <el-checkbox label="复选框 C"></el-checkbox>
              </el-checkbox-group>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="下拉选择" prop="selectText">
              <el-select class="eve-common-select" :size="$size" :disabled="disabled" clearable v-model="form.selectText"
                placeholder="请选择">
                <el-option label="黄金糕" value="选项1"></el-option>
                <el-option label="双皮奶" value="选项2"></el-option>
                <el-option label="蚵仔煎" value="选项3"></el-option>
                <el-option label="龙须面" value="选项4"></el-option>
                <el-option label="北京烤鸭" value="选项5"></el-option>
              </el-select>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="下拉多选" prop="selectMultipleText">
              <el-select class="eve-common-select" :size="$size" :disabled="disabled" clearable
                v-model="form.selectMultipleText" multiple placeholder="请选择">
                <el-option label="黄金糕" value="选项1"></el-option>
                <el-option label="双皮奶" value="选项2"></el-option>
                <el-option label="蚵仔煎" value="选项3"></el-option>
                <el-option label="龙须面" value="选项4"></el-option>
                <el-option label="北京烤鸭" value="选项5"></el-option>
              </el-select>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="支持搜索下拉选择">
              <el-select class="eve-common-select" :size="$size" :disabled="disabled" filterable
                v-model="form.selectFilterText" placeholder="请选择">
                <el-option label="黄金糕" value="选项1"></el-option>
                <el-option label="双皮奶" value="选项2"></el-option>
                <el-option label="蚵仔煎" value="选项3"></el-option>
                <el-option label="龙须面" value="选项4"></el-option>
                <el-option label="北京烤鸭" value="选项5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支持搜索下拉多选">
              <el-select class="eve-common-select" :size="$size" :disabled="disabled" filterable
                v-model="form.selectFilterMultipleText" multiple placeholder="请选择">
                <el-option label="黄金糕" value="选项1"></el-option>
                <el-option label="双皮奶" value="选项2"></el-option>
                <el-option label="蚵仔煎" value="选项3"></el-option>
                <el-option label="龙须面" value="选项4"></el-option>
                <el-option label="北京烤鸭" value="选项5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="级联下拉单选">
              <el-cascader class="eve-common-cascader" :size="$size" :disabled="disabled" v-model="form.cascaderText"
                :options="cascaderOption"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="级联下拉多选">
              <el-cascader class="eve-common-cascader" :size="$size" :disabled="disabled" :options="cascaderOption"
                :props="{ multiple: true }"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="开关">
              <el-switch class="eve-common-switch" :disabled="disabled" :size="$size"
                v-model="form.switchText"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="滑块">
              <el-slider class="eve-common-slider" :disabled="disabled" :size="$size"
                v-model="form.sliderText"></el-slider>
              <span class="eve-common-info-tip">{{ form.sliderText }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="日期选择" prop="dateText">
              <el-date-picker class="eve-common-date-picker" :size="$size" :disabled="disabled" v-model="form.dateText"
                type="date" placeholder="选择日期"></el-date-picker>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间选择">
              <el-time-select class="eve-common-time-select" v-model="form.timeText" :size="$size" :disabled="disabled"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30',
                }" placeholder="选择时间"></el-time-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="月份选择">
              <el-date-picker class="eve-common-date-picker" :size="$size" :disabled="disabled" v-model="form.monthText"
                type="month" placeholder="选择月份"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="简单上传" prop="fileText">
              <el-input class="eve-common-input" :size="$size" readonly :disabled="disabled" v-model="form.fileText"
                placeholder="未选择任何文件" />
              <input ref="inputUploadFile" type="file" @change="uploadChange" style="display: none" />
              <el-button type="primary" :size="$size" style="margin-left: 12px" @click="uploadTextBtn">上传</el-button>
              <el-button :size="$size" @click="clearUploadTextBtn">清空</el-button>
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="多文件上传">
              <el-upload class="eve-common-upload" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                :on-exceed="handleExceed" :file-list="fileList">
                <el-button :size="$size" type="primary">点击上传</el-button>
                <div slot="tip" class="eve-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上传带缩略图">
              <el-upload class="eve-common-upload" action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture">
                <el-button :size="$size" type="primary">点击上传</el-button>
                <div slot="tip" class="eve-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="form" :model="form" class="mt-form-title" :rules="rules" label-width="160px">
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <div class="eve-common-form-title">
              三列表单标题-label设置为160px
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input class="eve-common-input" :size="$size" :disabled="disabled" v-model="form.text"
                placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input class="eve-common-input" :size="$size" :disabled="disabled" v-model="form.text"
                placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="必填校验" prop="requestText">
              <el-input class="eve-common-input" :disabled="disabled" :size="$size" v-model="form.requestText" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input class="eve-common-input" :size="$size" :disabled="disabled" v-model="form.text"
                placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input class="eve-common-input" :size="$size" :disabled="disabled" v-model="form.text"
                placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="必填校验" prop="requestText">
              <el-input class="eve-common-input" :disabled="disabled" :size="$size" v-model="form.requestText" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input class="eve-common-input" :size="$size" :disabled="disabled" v-model="form.text"
                placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="常规文本框">
              <el-input class="eve-common-input" :size="$size" :disabled="disabled" v-model="form.text"
                placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="必填校验" prop="requestText">
              <el-input class="eve-common-input" :disabled="disabled" :size="$size" v-model="form.requestText" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item label="常规文本框">
              <el-input class="eve-common-input" :size="$size" :disabled="disabled" v-model="form.text"
                placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="常规文本框">
              <el-input class="eve-common-input" :size="$size" :disabled="disabled" v-model="form.text"
                placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-form ref="form" :model="formValidate" class="mt-form-title" :rules="formValidateRules" label-width="160px">
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="24">
            <div class="eve-common-form-title">带正则表单验证的例子</div>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="手机" prop="mobilePhone">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.mobilePhone" placeholder="请输入" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="固定电话" prop="fixedPhone">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.fixedPhone" placeholder="请输入" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="传真" prop="fax">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.fax" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="邮箱" prop="email">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.email" placeholder="请输入" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="邮政编码" prop="postalCode">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.postalCode" placeholder="请输入" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="身份证" prop="idCard">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.idCard" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="统一社会信用代码" prop="socialCreditCode">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.socialCreditCode"
                placeholder="请输入" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="全数字" prop="allDigital">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.allDigital" placeholder="请输入" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="eve-common-fixed-error" label="全中文" prop="allChinese">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.allChinese" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="eve-common-form-content">
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="全字母" prop="allLetters">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.allLetters" placeholder="请输入" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="数字+字母" prop="numberAndLetter">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.numberAndLetter" placeholder="请输入" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item class="eve-common-fixed-error" label="车牌号（含新能源）" prop="carNumber">
              <el-input class="eve-common-input" :size="$size" v-model="formValidate.carNumber" placeholder="请输入" />
              <!-- 自定义表单错误提示 -->
              <template slot="error" slot-scope="scope">
                <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                  <i class="el-icon-warning-outline"></i>
                </el-tooltip>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-form :model="tableForm" class="mt-form-title" ref="tableForm">
        <el-row type="flex" class="eve-common-form-content eve-common-form-title">
          <el-col :span="12">股东信息</el-col>
          <el-col :span="12" style="text-align: right; padding-right: 12px">
            <el-button :size="$size" plain>新增</el-button>
            <el-button :size="$size" plain>验证</el-button>
          </el-col>
        </el-row>
        <el-table :data="tableForm.list" class="custom-table" border style="width: 100%" size="medium">
          <el-table-column type="index" label="序号" width="60" align="lef"></el-table-column>
          <el-table-column label="联系方式" align="left">
            <template slot-scope="scope">
              <el-form-item :prop="'list.' + scope.$index + '.concatWay'" :ref="`concatWay${scope.$index}`" :rules="{
                required: true,
                message: '请选择联系方式',
                trigger: 'blur',
              }">
                <el-select class="eve-common-select" :size="$size" :disabled="disabled" clearable
                  v-model="scope.row.concatWay" @change="changeWays(scope.row.concatWay, scope.$index)" placeholder="请选择">
                  <template v-for="ways in concatWays">
                    <el-option :key="ways.code" :label="ways.name" :value="ways.code"></el-option>
                  </template>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="证件号码" align="left" class-name="must">
            <template slot-scope="scope">
              <el-form-item class="eve-common-fixed-error" :ref="`concatValue${scope.$index}`"
                :prop="'list.' + scope.$index + '.concatValue'" :rules="scope.row.rules">
                <el-input class="eve-common-input" :size="$size" v-model="scope.row.concatValue" />

                <template slot="error" slot-scope="scope">
                  <el-tooltip class="eve-common-form-error-tip" :content="scope.error">
                    <i class="el-icon-warning-outline"></i>
                  </el-tooltip>
                </template>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="left" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" @click="delRow(scope.row, scope.$index)" :size="$size">删除</el-button>
              <el-button type="text" @click="toUp(scope.row, scope.$index)" :size="$size">同上</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 12px auto; text-align: center">
          <el-button type="primary" :size="$size" @click="addRow()">新增一行</el-button>
        </div>
      </el-form>
    </div>
  </eve-container>
</template>
<script>
/* eslint-disable */
import commonApi from '@/api/common.js'
import { cascaderOption, dropDownTree } from './cascader'
//后端报错先去掉了，尽量不要在脚手架中加入接口请求，不通用，后续还是要删除的。
// 重复的校验规则:必填
const baseRule = [
  { required: true, message: '请填写联系方式', trigger: 'blur' }
]
export default {
  name: 'form',
  components: {

  },
  data () {
    // 日期范围正则表单-可根据实际需求对该方法进行调整
    const checkDateRange = (rule, value, callback) => {
      console.log(value)
      const { dateStart, dateEnd } = value
      if (dateStart && dateEnd && dateStart < dateEnd) {
        return callback()
      } else {
        return callback(new Error('请选择正确的日期范围！'))
      }
    }
    const checkAreaCode = (rule, value, callback) => {
      console.log(value)
      if (!value || value.length < 3) {
        callback(new Error('111111111'))
      } else {
        if (value.some(el => !el)) {
          callback(new Error('2222222222'))
        } else {
          callback()
        }
      }
    }
    return {
      disabled: false,
      cascaderOption, // 级联option数据
      dropDownTree,
      // 测试表单字段
      form: {
        text: '111',
        requestText: '111',
        longText: '111',
        fieldText: '111',
        passwordText: '111',
        clearText: '1111',
        numberText: '111',
        unitText: '111',
        horizontalRadio: '1',
        horizontalCheckBox: ['复选框 A', '复选框 B'],
        verticalRadio: '1',
        verticalCheckBox: ['复选框 A', '复选框 B'],
        selectText: '选项1',
        selectMultipleText: ['选项1', '选项2'],
        selectFilterText: '选项1',
        selectFilterMultipleText: ['选项1', '选项2'],
        cascaderText: '111',
        cascaderMultipleText: [],
        switchText: true,
        sliderText: 50,
        dateText: '111',
        timeText: '111',
        monthText: '111',
        fileText: '111',
        address2: [],
        // address3: ["4028b8c654ff22fb0154ff2455d20004", "4028b8c654ff43950154ff43a2290051", "4028b8c654ff43950154ff43a28e0054", "3508219", "福建省龙岩市长汀县策武镇"],
        // address4: ["4028b8c654ff22fb0154ff2455d20004", "4028b8c654ff43950154ff43a0ae0046", "4028b8c654ff43950154ff43a15c004b", "3507234", "福建省南平市光泽县崇仁乡"],
        // address5: ["4028b8c654ff22fb0154ff2455d20004", "4028b8c654ff43950154ff43a3390059", "4028b8c654ff43950154ff43a7420061", "35098123", "福建省宁德市福安市*福安畲族开发区"],
        // address6: ["4028b8c654ff22fb0154ff2455d20004", "4028b8c654ff43950154ff4398ee0016", "4028b8c654ff43950154ff4399110017", "3503024", "福建省莆田市城厢区常太镇"],
        // address7: ["4028b8c654ff22fb0154ff2455d20004", "4028b8c654ff43950154ff4397dc000f", "4028b8c654ff43950154ff4398890013", "35021106", "福建省厦门市集美区后溪镇"],
        address1: ["4028b8c654ff22fb0154ff2455d20004", "4028b8c654ff43950154ff439b800029", "4028b8c654ff43950154ff439cf50034", "35058219", "福建省泉州市晋江市磁灶镇"],
        dateRange: {
          dateStart: '2019-01-01',
          dateEnd: '2019-01-01'
        },
        dateRangScope: ['2019-01-01', '2019-01-09'],
        detailField: '这是一个多行的',
        autocomplete: '111'
      },
      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],
      rules: {
        requestText: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        verticalCheckBox: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        selectText: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        selectMultipleText: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        dateText: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        fileText: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        passwordText: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        dateRange: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: checkDateRange, trigger: 'change' }
        ],
        address: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: checkAreaCode, trigger: 'change' }
        ]
      },

      // 表单验证
      formValidate: {
        mobilePhone: '', // 移动电话
        fixedPhone: '', // 固定电话
        fax: '', // 传真
        email: '', // 邮箱
        postalCode: '', // 邮政编码
        idCard: '', // 身份证
        socialCreditCode: '', // 统一社会信用代码
        allDigital: '', // 全数字
        allChinese: '', // 全中文
        allLetters: '', // 全字母
        numberAndLetter: '', // 数字+字母
        carNumber: '' // 车牌号（含新能源）

      },
      formValidateRules: {
        mobilePhone: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkMobilePhone, trigger: 'blur' }
        ],
        fixedPhone: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkFixedPhone, trigger: 'blur' }
        ],
        fax: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkFax, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkEmail, trigger: 'blur' }
        ],
        postalCode: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkPostalCode, trigger: 'blur' }
        ],
        idCard: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkIdCheck, trigger: 'blur' }
        ],
        socialCreditCode: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkSocialCreditCode, trigger: 'blur' }
        ],
        allDigital: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkAllDigital, trigger: 'blur' }
        ],
        allChinese: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkAllChinese, trigger: 'blur' }
        ],
        allLetters: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkAllLetters, trigger: 'blur' }
        ],
        numberAndLetter: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkNumberAndLetter, trigger: 'blur' }
        ],
        carNumber: [
          { required: true, message: '必填项', trigger: 'blur' },
          { validator: this.$utils.checkCarNumber, trigger: 'blur' }
        ]
      },

      tableForm: {
        list: [
          {
            concatWay: '', // 联系方式：电话/手机
            concatValue: '', // 具体的联系方式的值
            rules: baseRule// 基础校验规则:必填
          }
        ]
      },
      listTmpl: [],
      tableRules: {
        address: [
          { required: true, message: '必填项', trigger: 'change' }
        ],
        idcard: [
          { required: true, message: '证件号必填', trigger: 'blur' }
        ],
        sfzcard: [
          { required: true, message: '身份证', trigger: 'blur' },
          { validator: this.$utils.checkIdCheck, trigger: 'blur' }
        ],
        jgzcard: [
          { required: true, message: '军官证必填', trigger: 'blur' },
          { validator: this.$utils.checkOfficersCard, trigger: 'blur' }
        ]
      },
      inputRules: { // 设置好需要的校验规则
        telephone: { pattern: /^1[3-9]\d{9}$/, message: '手机号格式错误', trigger: 'blur' },
        phone: { pattern: /^\d{10,12}$/, message: '座机号格式错误', trigger: 'blur' },
        QQ: { pattern: /^[1-9][0-9]{4,14}$/, message: 'QQ格式错误', trigger: 'blur' }
      },
      concatWays: [
        { name: '手机', code: 'telephone' },
        { name: '座机', code: 'phone' },
        { name: 'QQ', code: 'QQ' },
        { name: '邮箱', code: 'mail' }
      ],
      restaurants: []

    }
  },
  mounted () {
    this.restaurants = this.loadAll()
    // 获取全部省市县
    // this.getAllRegionData()
  },
  methods: {
    // 普通上传[start]-仅实现静态演示上传效果
    uploadTextBtn () {
      this.$refs.inputUploadFile.click()
    },
    uploadChange () {
      this.form.fileText = this.$refs.inputUploadFile.files[0].name
    },
    clearUploadTextBtn () {
      this.form.fileText = ''
    },
    // 普通上传[end]-仅实现静态演示上传效果

    // 复杂图片上传[end]-仅实现静态演示上传效果
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    // 复杂图片上传[end]-仅实现静态演示上传效果

    // 动态增减表格表单
    addRow () {
      this.tableForm.list.push({
        concatWay: '', // 联系方式：电话/手机
        concatValue: '', // 具体的联系方式的值
        rules: baseRule// 基础校验规则:必填
      })
    },
    // 同上
    toUp (row, index) {
      this.$set(this.tableForm.list, index, this.tableForm.list[index - 1])
      this.$nextTick(() => {
        this.$refs['region' + index].init()
      })
    },
    // 切换修改正则验证
    changeWays (data, index) {
      // 有值的话将自己的校验手动清空
      if (data) {
        const getRefWays = 'concatWay' + index
        // console.log('111111', this.$refs[getRefWays])
        this.$refs[getRefWays].clearValidate()
      }
      // 将值清空
      this.tableForm.list[index].concatValue = ''
      // 去除联系方式的格式校验
      const getRefs = 'concatValue' + index
      this.$refs[getRefs].clearValidate()
      // 给表单加上新的校验
      this.tableForm.list[index].rules = [this.inputRules[data]].concat(baseRule)
    },
    delRow (row, index) {
      this.tableForm.list.splice(index, 1)
    },
    // 消息提示
    info () {
      this.$message('这是一条消息提示')
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    loadAll () {
      return [
        { value: '三全鲜食（北新泾店）', address: '长宁区新渔路144号' },
        { value: 'Hot honey 首尔炸鸡（仙霞路）', address: '上海市长宁区淞虹路661号' },
        { value: '新旺角茶餐厅', address: '上海市普陀区真北路988号创邑金沙谷6号楼113' },
        { value: '泷千家(天山西路店)', address: '天山西路438号' },
        { value: '胖仙女纸杯蛋糕（上海凌空店）', address: '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
        { value: '贡茶', address: '上海市长宁区金钟路633号' },
        { value: '豪大大香鸡排超级奶爸', address: '上海市嘉定区曹安公路曹安路1685号' },
        { value: '茶芝兰（奶茶，手抓饼）', address: '上海市普陀区同普路1435号' },
        { value: '十二泷町', address: '上海市北翟路1444弄81号B幢-107' },
        { value: '星移浓缩咖啡', address: '上海市嘉定区新郁路817号' },
        { value: '阿姨奶茶/豪大大', address: '嘉定区曹安路1611号' },
        { value: '新麦甜四季甜品炸鸡', address: '嘉定区曹安公路2383弄55号' },
        { value: 'Monica摩托主题咖啡店', address: '嘉定区江桥镇曹安公路2409号1F，2383弄62号1F' },
        { value: '浮生若茶（凌空soho店）', address: '上海长宁区金钟路968号9号楼地下一层' },
        { value: 'NONO JUICE  鲜榨果汁', address: '上海市长宁区天山西路119号' },
        { value: 'CoCo都可(北新泾店）', address: '上海市长宁区仙霞西路' },
        { value: '快乐柠檬（神州智慧店）', address: '上海市长宁区天山西路567号1层R117号店铺' },
        { value: 'Merci Paul cafe', address: '上海市普陀区光复西路丹巴路28弄6号楼819' },
        { value: '猫山王（西郊百联店）', address: '上海市长宁区仙霞西路88号第一层G05-F01-1-306' },
        { value: '枪会山', address: '上海市普陀区棕榈路' },
        { value: '纵食', address: '元丰天山花园(东门) 双流路267号' },
        { value: '钱记', address: '上海市长宁区天山西路' },
        { value: '壹杯加', address: '上海市长宁区通协路' },
        { value: '唦哇嘀咖', address: '上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元' },
        { value: '爱茜茜里(西郊百联)', address: '长宁区仙霞西路88号1305室' },
        { value: '爱茜茜里(近铁广场)', address: '上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺' },
        { value: '鲜果榨汁（金沙江路和美广店）', address: '普陀区金沙江路2239号金沙和美广场B1-10-6' },
        { value: '开心丽果（缤谷店）', address: '上海市长宁区威宁路天山路341号' },
        { value: '超级鸡车（丰庄路店）', address: '上海市嘉定区丰庄路240号' },
        { value: '妙生活果园（北新泾店）', address: '长宁区新渔路144号' },
        { value: '香宜度麻辣香锅', address: '长宁区淞虹路148号' },
        { value: '凡仔汉堡（老真北路店）', address: '上海市普陀区老真北路160号' },
        { value: '港式小铺', address: '上海市长宁区金钟路968号15楼15-105室' },
        { value: '蜀香源麻辣香锅（剑河路店）', address: '剑河路443-1' },
        { value: '北京饺子馆', address: '长宁区北新泾街道天山西路490-1号' },
        { value: '饭典*新简餐（凌空SOHO店）', address: '上海市长宁区金钟路968号9号楼地下一层9-83室' },
        { value: '焦耳·川式快餐（金钟路店）', address: '上海市金钟路633号地下一层甲部' },
        { value: '动力鸡车', address: '长宁区仙霞西路299弄3号101B' },
        { value: '浏阳蒸菜', address: '天山西路430号' },
        { value: '四海游龙（天山西路店）', address: '上海市长宁区天山西路' },
        { value: '樱花食堂（凌空店）', address: '上海市长宁区金钟路968号15楼15-105室' },
        { value: '壹分米客家传统调制米粉(天山店)', address: '天山西路428号' },
        { value: '福荣祥烧腊（平溪路店）', address: '上海市长宁区协和路福泉路255弄57-73号' },
        { value: '速记黄焖鸡米饭', address: '上海市长宁区北新泾街道金钟路180号1层01号摊位' },
        { value: '红辣椒麻辣烫', address: '上海市长宁区天山西路492号' },
        { value: '(小杨生煎)西郊百联餐厅', address: '长宁区仙霞西路88号百联2楼' },
        { value: '阳阳麻辣烫', address: '天山西路389号' },
        { value: '南拳妈妈龙虾盖浇饭', address: '普陀区金沙江路1699号鑫乐惠美食广场A13' }
      ]
    },
    handleSelect (item) {
      console.log(item)
    },
    getAllRegionData () {
      return new Promise(resolve => {
        commonApi.findSubByIdAndLevel({ id: -1, level: 7 }).then(res => {
          if (res.success) {
            this.$ls.set('area', res.data)
          } else {
            this.$message.error(res.errorMessage)
          }
        })
      })
    }

  }
}
</script>
<style lang="scss">
//表格内容自定义高度设置（根据实际情况自己配置class）
.custom-table {
  td>.cell {
    height: inherit !important;
    line-height: inherit !important;
  }
}

//按规范自行设置
.eve-upload__tip {
  font-size: $--font-size-extra-small;
  color: $--color-text-secondary;
  margin: 12px 0;
}
</style>
